import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import ElementPlus from "element-plus";
import "element-plus/dist/index.css";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import VueMarkdownEditor from "@kangc/v-md-editor";
import "@kangc/v-md-editor/lib/style/base-editor.css";
import vuepressTheme from "@kangc/v-md-editor/lib/theme/vuepress.js";
import "@kangc/v-md-editor/lib/theme/style/vuepress.css";
import Prism from "prismjs";
import { createStore } from "vuex";

import hljs from "highlight.js";
import "highlight.js/styles/atom-one-light.css"; //样式

VueMarkdownEditor.use(vuepressTheme, {
  Prism,
});
const store = createStore({
  state() {
    return {
      username: "",
    };
  },
  mutations: {},
});
const app = createApp(App);

app
  .use(ElementPlus)
  .use(router)
  .use(store)
  .use(hljs)
  .use(VueMarkdownEditor)
  .mount("#app");
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}
//创建v-highlight全局指令
app.directive("highlight", function (el) {
  let blocks = el.querySelectorAll("pre code");

  blocks.forEach((block) => {
    hljs.highlightBlock(block);
    // 从这开始是设置行号
    block.innerHTML = `<ol><li>${block.innerHTML.replace(
      /\n/g,
      `</li><li class="line">`
    )}</li></ol>`;
  });
});
